<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>ContentPane</title>

	<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>

	<script type="text/javascript">
		require([
			"dojo/dom-construct",
			"dojo/ready",
			"dijit/registry",
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat",
			"dojox/mobile/ContentPane"
		], function(domConstruct, ready, registry){
			ready(function(){
				registry.byId("pane3").set("content", "<div data-dojo-type='dojox.mobile.RoundRect' shadow='true'>Thank you!</div>");
				registry.byId("pane4").set("href", "data/fragment1.html");
				var dom = domConstruct.create("DIV", {
					"data-dojo-type": "dojox.mobile.RoundRect",
					"data-dojo-props": "shadow:true"
				});
				dom.innerHTML = "DOM Tree";
				registry.byId("pane5").set("content", dom);
			});
		});
	</script>
</head>
<body style="visibility:hidden;">
	<div id="foo" data-dojo-type="dojox.mobile.View">
		<h1 data-dojo-type="dojox.mobile.Heading">ContentPane</h1>

		<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Pane1</h2>
		<div id="pane1" data-dojo-type="dojox.mobile.ContentPane"
		     content="&lt;div data-dojo-type='dojox.mobile.RoundRect' shadow='true'&gt;Thank you!&lt;/div&gt;"></div>

		<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Pane2</h2>
		<div id="pane2" data-dojo-type="dojox.mobile.ContentPane"
		     href="data/fragment1.html"></div>

		<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Pane3</h2>
		<div id="pane3" data-dojo-type="dojox.mobile.ContentPane"></div>

		<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Pane4</h2>
		<div id="pane4" data-dojo-type="dojox.mobile.ContentPane"></div>

		<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Pane5</h2>
		<div id="pane5" data-dojo-type="dojox.mobile.ContentPane"></div>
	</div>
</body>
</html>
